<template>
    <div class="fill-form-table">
        <slot name="titleName"></slot>
        <table-content-view v-if="_onlyData" :tableData="tableData"></table-content-view>
        <el-table
            v-else
            :data="tableData"
            class="pbb__table"
            header-cell-class-name="pbb__table-thead"
            cell-class-name="pbb__table-thead-cell"
            row-class-name="pbb__table-thead-row"
            border
            style="width: 100%">
            <el-table-column
                label="序号"
                align="center"
                type="index"
                width="60">
            </el-table-column>
            <template v-for="(item, index) in currentList">
                <el-table-column
                    :key="index"
                    :prop="item.name"
                    :label="item.name"
                    min-width="130px">
                    <template slot="header">
                        <span class="control-item-name" :class="{'is_required': item.required}">{{item.name}}{{ item.unitKindName ? `(${item.unitKindName})` : "" }}</span>
                    </template>
                    <template slot-scope="scope">
                        <fill-in-table-item :item.sync="item" :modelData.sync="scope.row[index]"></fill-in-table-item>
                    </template>
                </el-table-column>
            </template>
            <el-table-column
                label="操作"
                width="100">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="addData(scope.$index)">添加</el-button>
                    <el-popconfirm
                        title="确定删除吗？"
                        @confirm="deleteData(scope.row, scope.$index)">
                        <el-button slot="reference" v-if="scope.$index" size="mini" type="text">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts">
import { Component } from "vue-property-decorator";
import FillInTableItem from "./table-item.vue";
import FillInMixin from "./mixin";
import TableContentView from "./table-content-view.vue";

@Component({
    components: {
        FillInTableItem,
        TableContentView
    }
})
export default class FillInTable extends FillInMixin {
    tableData: any = []

    created() {
        this.tableData = [];
        this.addData(-1);
        if (this.$route.query.dataFormId) {
            this.tableData = this.getTableValue(this.currentList);
        }
    }

    addData(index: any) {
        const lineData: any[] = [];
        this.currentList.forEach((item: any, index: any) => {
            if (["1", "2", "3", "6", "7", "11", "12"].includes(item.valueKindId)) {
                lineData[index] = { ...item, itemValue: "" };
            } else if (item.valueKindId) {
                lineData[index] = { ...item, extData: [] };
            }
        });
        this.tableData.splice(index + 1, 0, lineData);
    }

    deleteData(row: any, index: any) {
        this.tableData.splice(index, 1);
    }

    save() {
        return { id: this.id, tableData: this.tableData };
    }
}
</script>

<style lang="scss" scoped>

</style>
